import React, {Component} from 'react'
import {connect} from 'react-redux'

import MyHeader from "../components/myheader"
import {changeLoginPwd,changeWithdrawPwd} from "../redux/actions/userAction"
import {RES_OK_CODE,RES_BLOCKED_CODE} from "../redux/types/index" 

import { Button, List ,InputItem ,Toast} from 'antd-mobile';
import { debug } from 'util';
const Item = List.Item;
const Brief = Item.Brief;

export class userPWChangeContainer extends Component {
  constructor (props){
   super(props)
   this.state= {
      oldpw:"",
      newpw: "",
      newpw2:""
   }
   this.onProcess = false;
   this.title = "登录密码"
}
componentWillMount(){    
  this.props.match.params.key =="withdraw" && (this.title = "提款密码")
}
componentDidMount(){
  this.autoFocusInst.focus();
}
changePW(){
  const state = this.state;
  const {dispatch, location, history,match} = this.props;
  if(state.oldpw ==""){
    Toast.info('请输入旧密码');
  }else if(state.newpw == ""){
    Toast.info('请输入新密码');
  }else if(state.newpw != state.newpw2){
    Toast.info('新密码两次输入不一样');
  }else if(state.oldpw == state.newpw2){
    Toast.info('新密码和旧密码一样');
  }else{
    this.onProcess = true;
    let _this = this;
    Toast.loading("提交中",0)
    match.params.key == "withdraw" ?  dispatch(changeWithdrawPwd(state.oldpw, state.newpw,(data)=>{
      _this.onProcess = false;
      Toast.hide()
      if (data.errorCode != RES_OK_CODE) {
        if (data.errorCode == RES_BLOCKED_CODE) {
          Toast.info(data.msg);
          // userLogout(() => {
          //   history.push('/');
          // });
        } else {
          Toast.info(data.msg);
        }
      } else {
        Toast.info('修改密码成功');
        history.push('/my');
      }
    }))   :
    dispatch(changeLoginPwd(state.oldpw, state.newpw,(data)=>{
      _this.onProcess = false;
      Toast.hide()
      if (data.errorCode != RES_OK_CODE) {
        if (data.errorCode == RES_BLOCKED_CODE) {
          Toast.info(data.msg);
          // userLogout(() => {
          //   history.push('/');
          // });
        } else {
          Toast.info(data.msg);
        }
      } else {
        Toast.info('修改密码成功');
        history.push('/my');
      }
    }))      
  }
}
change(string,value){
  console.log(string,this.state[string]);
  
  // this.state.oldpw
  // this.props.match.params.key == "withdraw"? (this.state.oldpw.length >3 ? ""
  //           :this.setState({oldpw:value})) :this.setState({oldpw:value}) 
}
   render() {
   return <div className="changepw">
      <MyHeader {...this.props}>修改{this.title}</MyHeader>

      <div className="basepage">

      <List className="changepw-container">
          <InputItem
            ref={el => this.autoFocusInst = el}
            type="password"
            maxLength={this.props.match.params.key == "withdraw"? "4" : ""}
            onChange={(value)=>{this.setState({oldpw:value})}}
            value={this.state.oldpw}
          >原{this.title}：</InputItem>
            
            <InputItem
            type="password"
            maxLength={this.props.match.params.key == "withdraw"? "4" : ""}
            onChange={(value)=>{this.setState({newpw:value})}}
            value={this.state.newpw}
          >新{this.title}：</InputItem>

           <InputItem
            type="password"
            maxLength={this.props.match.params.key == "withdraw"? "4" : ""}
            onChange={(value)=>{this.setState({newpw2:value})}}
            value={this.state.newpw2}
          >确认新密码：</InputItem>
          </List>
          <Button type="primary" onClick={()=>{this.changePW()}}>确认</Button>
      </div>
   </div>
   }
}

function mapStateToProps(state) {
  return {
    user: state.user // gives our component access to state through props.toDoApp
  }
}

export default connect(mapStateToProps)(userPWChangeContainer)